<template>
	<view class="page">
		<u-gap height="30"></u-gap>
		<view class="section margin0">
			<view class="title">{{ type===0 ? "AI短视频积分充值" : "AI微信积分充值" }}</view>
			<view class="tip">100元 = <text>{{ type===0 ? 1350 : 50000 }}</text>积分</view>
			<view class="tip">单笔充值金额不能大于<text>50000元</text></view>
			<view class="tip">最低充值<text>100元</text>，且金额必须为<text>100元</text>的倍数</view>
			<view class="tip">{{ type===0 ? "半分钟消耗30积分, 1分钟消耗60AI视频积分" : "每20字左右对话消耗20AI对话积分" }}</view>
		</view>

		<view class="inpVue margin40">
			<view class="label">选择充值类型</view>
			<view class="margin20">
				<u-radio-group v-model="type" active-color="rgba(248, 195, 41, 1)" @change="radioGroupChange">
					<u-radio  v-for="(item, index) in types" :key="index"  :name="item.type">{{item.name}}</u-radio>
				</u-radio-group>
			</view>
		</view>

		<view class="inpVue margin40">
			<view class="label">充值金额</view>
			<input type="number" v-model="quantity" placeholder="最低充值100元，且金额必须为100的倍数"/>
		</view>

		<view class="inpVue flex-between margin30">
			<view class="key">当前剩余{{ type===0 ? "短视频" : "微信"}}积分</view>
			<view class="val" style="font-weight: 600;">{{ type===0 ? aiVideoPoints : aiWechatPoints }}</view>
		</view>

		<view class="inpVue flex-between margin30" v-if="quantity && quantity>0">
			<view class="key">充值后{{ type===0 ? "短视频" : "微信"}}积分</view>
			<view class="val" style="color: rgba(248, 195, 41, 1); font-weight: 600;">{{ type===0 ? quantity * (1350/100) + aiVideoPoints : quantity * (50000/100) + aiWechatPoints }}</view>
		</view>
		<view class="inpVue flex-between margin30" v-if="quantity && quantity>0">
			<view class="key">支付金额</view>
			<view class="val" style="color: rgba(248, 195, 41, 1); font-weight: 600;">{{ quantity || 0 }}元</view>
		</view>

		<view class="botVue">
			<view class="btn margin30" @click="chargeFun()">立即充值</view>
		</view>

	</view>
</template>

<script>
	export default {
		data(){
			return {
				type: 0,
				types: [{ name: "AI短视频积分充值", type: 0 }, { name: "AI微信积分充值", type: 1 }],
				quantity: null,
				aiWechatPoints: 0,
				aiVideoPoints: 0,
				total: 0,
			}
		},

		async onLoad() {
			await this.getPoint()
		},

		methods: {
			radioGroupChange(e){
				this.quantity = null
				this.type = e
			},

			// 获取积分余额
			async getPoint() {
				const res = await this.$request("/aiet-user-center/user/points/summary", {}, "GET")
				if (res.code === 200) {
					this.aiVideoPoints = res.data.aiVideoPoints
					this.aiWechatPoints = res.data.aiWechatPoints
				}
			},

			// 立即充值
			async chargeFun(){
				if (!this.quantity) return this.$u.toast("请输入充值金额")
				if (this.quantity<100) return this.$u.toast("充值金额不得低于100元")
				if(this.quantity>50000) return this.$u.toast("充值金额不能大于50000元")
				if(this.quantity%100!=0) return this.$u.toast("充值金额必须为100的倍数")
				uni.showLoading()
				const res = await this.$request("/aiet-user-center/user/orders/wxPay", {
					productName: `购买AI${this.type===0?"视频":"微信"}${this.type===0 ? this.quantity* (1350/100) : this.quantity * (50000/100)}积分`,
					orderAmount: this.quantity,
					// orderAmount: 0.01,
					platform: "数字人-H5",
					productType: 1,
					videoPoints: this.type===0 ? this.quantity * (1350/100) : 0,
					wechatPoints: this.type=== 1 ? this.quantity * (50000/100) : 0,
					manufacturer: 1
				}, "POST", "application/json")
				if (res.code === 200) {
					console.log(res.data)
					uni.hideLoading()
					let payment = res.data
					let that = this
					uni.requestPayment({
						timeStamp: payment.timeStamp,
						nonceStr: payment.nonceStr,
						package: payment.package,
						signType: payment.signType,
						paySign: payment.paySign,
						success(payRes) {
							that.$u.toast("充值成功")
							that.getPoint()
							that.quantity = ''
						},
						fail(payErr) {
							console.log("支付失败", payErr)
						}
					})
				} else {
					uni.hideLoading()
					this.$u.toast(res.msg)
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.section {
		width: 690rpx;
		padding: 30rpx;
		border-radius: 12rpx;
		background: #fff;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178,178,178,0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255,255,255,0.25);
		.title {
			color: #000;
			font-weight: 600;
			font-size: 30rpx;
			line-height: 1;
		}
		.tip {
			color: #333;
			padding: 24rpx 0 0 0;
			line-height: 1;
			text {
				color: rgba(248, 195, 41, 1);
				font-weight: 600;
			}
		}
	}

	.inpVue {
		width: 690rpx;
		background: #fff;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178,178,178,0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255,255,255,0.25);
		padding: 30rpx;
		border-radius: 12rpx;
		.label {
			color: #000;
			font-weight: 600;
			font-size: 30rpx;
			line-height: 1;
		}
		input {
			width: 100%;
			height: 88rpx;
			border-radius: 12rpx;
			border: 1rpx solid #ececec;
			padding-left: 30rpx;
			display: block;
			margin-top: 20rpx;
			color: #000;
			box-sizing: border-box;
			font-size: 28rpx;
		}
		.key {
			line-height: 1;
			color: #000;
		}
		.val {
			line-height: 1;
			color: #000;
		}
	}
	.botVue {
		width: 750rpx;
		position: fixed;
		left: 0;
		bottom: 80rpx;
		.total {
			color: rgba(248, 195, 41, 1);
			font-weight: 600;
			line-height: 1;
			font-size: 32rpx;
		}
		.btn {
			width: 690rpx;
			height: 88rpx;
			background: rgba(248, 195, 41, 1);
			border-radius: 12rpx;
			line-height: 88rpx;
			text-align: center;
			color: #fff;
		}
	}
</style>
